<template>
  <div class="container">
    <el-card class="box-card" shadow="always">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="目录名称">
          <el-input v-model="formInline.directoryName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option
              v-for="item in stateList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="clearSearch">清除</el-button>
          <el-button type="primary" @click="onSubmit" size="small"
            >确定</el-button
          >
        </el-form-item>
        <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            class="NewDirectory"
            @click="dialogFormVisible = true"
            >新增目录</el-button
          >
      </el-form>
      <el-alert
        :title="'数据一共' + total + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-table :data="directoryList" class="has-gutter" style="width: 100%">
        <el-table-column label="序号" width="180" type="index">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180">
        </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" :formatter="tansformTime"> </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="{ row }">
            {{ row.state == 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="stateButton(row)">{{
              row.state == 1 ? "启用" : "禁用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state == '1' ? false : true"
              @click="alter(row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state == '1' ? false : true"
              @click="delAfter(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="changePage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          :current-page="page.page"
          layout="prev, pager, next,total,sizes,jumper"
          :total="total"
          style="margin-top: 20px; text-align: right"
        >
        </el-pagination>
      </div>
    </el-card>
    <directorys-add :value-data="directoryList" :subject-id="itemId" :tags-show.sync="dialogFormVisible" @addTags="getdirectoryList" @delItemId="itemId=0"></directorys-add>
     <!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="25%">
      <span
        ><i class="el-icon-warning"></i> 此操作将永久删除该学科，是否继续</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="del(form.id)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import directorysAdd from '@/module-hmmm/components/directorys-add'
import { list, changeState, remove } from '@/api/hmmm/directorys'
export default {
  components: { directorysAdd },
  data () {
    return {
      dialogFormVisible: false,
      centerDialogVisible: false, // 删除弹出框
      currentPage4: 1,
      directoryName: '',
      total: 0,
      itemId: 0,
      directoryList: [],
      state: {
        id: '',
        state: ''
      },
      formInline: {
        directoryName: '',
        state: ''
      },
      stateList: [
        {
          id: '2',
          value: '启用'
        },
        {
          id: '1',
          value: '禁用'
        }
      ],
      form: {
        id: '',
        tagName: ''
      },
      page: {
        page: 1, // 当前页码
        pagesize: 10, // 请求条数
        counts: null, // 总数
        pages: null
      }
    }
  },
  created () {
    this.getdirectoryList()
  },
  methods: {
    async  onSubmit () {
      const res = await list({ ...this.formInline, state: this.formInline.state - 1, ...this.page })
      const { items, counts } = res.data
      this.directoryList = items
      this.total = counts
    },
    // 输入页码改变时
    changePage (newPage) {
      this.page.page = newPage
      this.getdirectoryList()
    },
    // 改变请求条数
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getdirectoryList()
    },
    // 获取列表数据
    async getdirectoryList () {
      const dataList = await list(this.page)
      const { items, counts } = dataList.data
      this.directoryList = items
      this.total = counts
    },
    // 禁用按钮
    async stateButton (row) {
      this.state.state = row.state === 1 ? 0 : 1
      this.state.id = row.id
      await changeState(this.state)
      this.$message.success('操作成功')
      this.getdirectoryList()
    },
    tansformTime (row, column, cellValue, index) {
      const data = new Date(cellValue)
      const a = this.$moment(data).format('YYYY-MM-DD HH:mm:ss')
      return a
    },
    // 输入框清空
    clearSearch () {
      this.formInline = {
        state: '',
        tagName: ''
      }
      this.getdirectoryList()
    },
    // 删除按钮
    // 删除
    delAfter (id) {
      this.centerDialogVisible = true
      this.form.id = id
    },
    async del (id) {
      try {
        // await this.$confirm('此确定将永久删除学科，是否继续？')
        await remove({ id })
        this.centerDialogVisible = false
        // console.log(id)
        this.getdirectoryList()
        this.$message.success('删除标签成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 修改
    alter (id) {
      this.dialogFormVisible = true
      this.itemId = id
      this.getdirectoryList()
    }
  }
}
</script>

<style scoped >
.container {
  padding: 10px;
}
.box-card {
  width: 100%;
}
.NewDirectory {
  float: right;
}
.has-gutter {
  margin-top: 20px;
}
</style>
